<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <!-- bootstrap -->
   <script src="vendor/jquery/jquery.min.js"></script>
   <link href="vendor/bootstrap/css/bootstrap.min.css"  rel="stylesheet">
   <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
   <link href="css/2.css" rel='stylesheet' type='text/css' />

    <!-- vue和axios -->
   <script src="js/vue.min.js"></script>
   <script src="js/axios.min.js"></script>
</head>
<body>
        <script>
                $(function(){
                    var data4Vue = {
                        uri:'http:///120.79.186.44:9092/manager/user/selByUsernameAndPassword',
                        name:'',
                        password:'',
                        token:'',
                        status:''
                    };
                    //ViewModel
                    var vue = new Vue({
                        el: '#workingArea',
                        data: data4Vue,
                        mounted:function(){
                     
                        },
                        methods: {
                            login:function(){  
                                if(0==this.name.length){
                                    alert("请输入账号");
                                    return;
                                }
                                if(0==this.password.length){
                                    alert("请输入密码");
                                    return;
                                }
                                var url =  this.uri;
            
                                axios.post(url,{username:this.name,password:this.password})
                                                 .then(res => {
                                                (vue.token = res.data); 
                                                if(vue.token.status != 200){
                                                    alert("账号密码错误");
                                                }
                                                else{
                                                    if(this.token.data.permission !="admin")
                                                    alert("您没有权限访问后台");
                                                    else
                                              {
                                             alert("登录成功");
                                             sessionStorage.jwt = '123456';
                                             window.location.href = 'admin_category.html';
                                              }
                                                }    
                                                })
                                
                        }
                    }
                })
            })
            </script>
    <div class="page login-page" id="workingArea">
        <div class="container d-flex align-items-center">
            <div class="form-holder has-shadow">
                <div class="row">
                    <!-- Logo & Information Panel-->
                    <div class="col-lg-6">
                        <div class="info d-flex align-items-center">
                            <div class="content">
                                <div class="logo">
                                    <h1>USC</h1>
                                </div>
                                <p>作品管理后台登录</p>
                            </div>
                        </div>
                    </div>

                    <!-- Form Panel    -->
                    <div class="col-lg-6 bg-white">

                        <div class="form d-flex align-items-center">

                            <div class="content">

                                <table class="loginTable">
                                    <tr>
                                        <td>
                                            <div class="form-group">
                                                用户名
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-group">
                                                <input v-model="name" placeholder="请输入您的用户名" class="input-material">
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="form-group">
                                                密码
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-group">
                                                <input v-model="password"  type="password"  placeholder="请输入您的密码" class="input-material">
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                                <div class="form-group" align="center">
                                    <button  @click="login" type="submit" class="btn btn-primary">登录</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>